<template>
	<div :class="curClassName" :style="curStyle">
		<van-field
			v-model="curValue"
			:disabled="disabled"
			:placeholder="placeholder"
		></van-field>
	</div>
</template>
<script setup lang="ts">
import { PresetTextInputProps } from './preset-text-input';
import { IEvent } from '@/core';
const props = defineProps(PresetTextInputProps);

interface PresetTextInputEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<PresetTextInputEmit>();

/**
 * 项名称
 *
 * @memberof AppPresetTextInput
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppPresetTextInput
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppPresetTextInput
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return `app-preset-text-input ${itemName.value} ${
			layoutModel.sysCss || ''
		}`;
	}
});

/**
 * 禁用
 *
 * @memberof AppPresetTextInput
 */
const disabled = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.disabled;
	}
});

/**
 * 占位提示
 *
 * @memberof AppPresetTextInput
 */
const placeholder = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.placeholder;
	}
});

/**
 * 当前值
 *
 * @type {any}
 * @memberof AppPresetTextInput
 */
const curValue = computed({
	get: () => props.value,
	set: (val) => {
		emit('component-action', {
			name: props.name,
			action: 'valueChange',
			data: val,
		});
	},
});
</script>
